<template>
  <div>
    <input type="text" v-model="tel" maxlength="11" placeholder="请输入手机号"/>{{ telTip }} <br />
    <input type="password" v-model="password" placeholder="请输入密码"/>{{ passwordTip }}<br />
    <button v-on:click="getData" v-bind:disabled="telTip !== '√' || passwordTip !== '√'" v-bind:class="telTip === '√' && passwordTip === '√' ? 'active' : ''">登陆</button>
  </div>
</template>

<script>
export default {
  data () {
    return { 
      tel: '',
      password: ''
    }
  },
  computed: { // 依据初始化数据的变化衍生出来的状态
    telTip () {
      if (this.tel === '') {
        return '请输入手机号'
      }else if (!(/^1[3456789]\d{9}$/.test(this.tel))) {
        return '手机号码格式错误'
      } else {
        return '√'
      }
    },
    passwordTip () {
      if (this.password === '') {
        return ''
      }else if (this.password.length < 6) {
        return '密码格式错误，不能小于6位'
      } else {
        return '√'
      }
    }
  },
  methods: { // vue自定义函数的聚集地
    getData () {
      console.log('tel', this.tel)
      console.log('password', this.password)
    }
  }
}
</script>

<style>
.active {
  color:#fff;
  background: #f66;
}
</style>
